<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    div{
      width: 100px;
      height: 120px;
      background-color: aqua;
    }
  </style>
</head>
<body>
<div id="app">

  <div @click="divClick">
    <!--.stop 阻止冒泡-->
    <button @click.stop="btnClick">按钮</button>
  </div>

  <!-- .prevent修饰符 拦截默认事件 -->
  <form action="baidu">
    <input type="submit" value="提交" @click.prevent="subClick">
  </form>

  <!  .key或.keyCode 按键名或ASCII --监听某个按键的 v-on:keyup=''释放按键-->
  <input type="text" @keyup.enter="enterKeyUp">

  <!-- .once 某个元素只能点一次-->
  <button @click.once="onceClick">点一次</button>
</div>

<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      message: 'hi'
    },
    computed: {

    },
    methods: {
      divClick(){
        console.log("div 点击")
      },
      btnClick(){
        console.log("btn 点击")
      },
      subClick(){
        console.log("阻止提交")
      },
      enterKeyUp(){
        console.log("按了Enter键")
      },
      onceClick(){
        console.log("只能点一次")
      }
    }
  })

</script>
</body>
</html>